/**
 * 版本：0.2
 * 作者：赵梦昕
 * 依赖：二维码生成插件（qrcode）
 * 使用：使用全局变量 _Me调用toDo()方法
 * 参数：_Me.toDo(需要生成二维码的url地址,用于展示合成图片的Id,背景图片的配置，二维码的配置)
 * 基础使用：_Me.toDo("http://jindo.dev.naver.com/collie","newimage",{url:"./bg.jpg"})
 * 全配置使用：_Me.toDo("http://jindo.dev.naver.com/collie","newimage",{url:"./bg.jpg",width: 900,height: 492,x: 0,y: 0},{url:"./code.jpg",width: 325,height: 325,x: 416,y: 83})
 * 注意：请在服务器环境下使用。
 * **/
(function () {
    var MergePic = {
        config: {
            canvas: {
                id: "merge_canvas",
                el: null,
                cxt: null,
                width: 900,
                height: 492,
                x: 0,
                y: 0
            },
            bgImg: {
                url: "",
                width: 900,
                height: 492,
                x: 0,
                y: 0
            },
            qrcode: {
                url: "",
                width: 325,
                height: 325,
                x: 416,
                y: 83,
            },
            mergePicUrl: ""
        },
        init: function () {
            this.initQR();
            this.initCanvas();
        },
        initElement: function (el, idstr) {
            var body = document.querySelector("body");
            var canvas = document.createElement(el);
            canvas.setAttribute("id", idstr);
            canvas.style.display = "none";
            body.appendChild(canvas);
        },
        initCanvas: function () {
            this.initElement("canvas", this.config.canvas.id);
            this.config.canvas.el = document.getElementById(this.config.canvas.id);
            this.config.canvas.el.width = this.config.canvas.width;
            this.config.canvas.el.height = this.config.canvas.height;
            this.config.canvas.cxt = this.config.canvas.el.getContext("2d");
        },
        initQR: function () {
            this.initElement("div", "qrcode");
        },
        replaceOption: function (oldOption, newOption) {
            Object.keys(newOption).forEach(function (key) {
                if (newOption[key] != "") oldOption[key] = newOption[key];

            });
        },
        checkReport: function () {
            //判断浏览器是否支持canvas标签
            if (this.config.canvas.el.getContext("2d")) return true;
            else return false;
        },
        drawImage: function (option, callback) {
            var img = new Image()
            img.src = option.url;
            var that = this;
            // 图片加载完后，将其显示在canvas 上
            img.onload = function () {
                that.config.canvas.cxt.drawImage(img, option.x, option.y, option.width, option.height);
                callback();
            }
        },
        mergePic: function (callback) {
            if (!this.checkReport()) {
                alert("您的浏览器不支持canvas，请换个浏览器试试");
                return false;
            }
            var that = this;
            this.drawImage(this.config.bgImg, function () {
                that.drawImage(that.config.qrcode, function () {
                    callback(that.config.canvas.el.toDataURL("image/png"));

                })
            })
        },
        toDo: function (url, imgId, bgOption, qrOption) {
            if (bgOption) this.replaceOption(this.config.bgImg, bgOption);
            if (qrOption) this.replaceOption(this.config.qrcode, qrOption);

            this.init();
            new QRCode(document.getElementById("qrcode"), url);
            this.config.qrcode.url = document.querySelector("#qrcode canvas").toDataURL("image/png");

            this.mergePic(function (imgUrl) {
                document.getElementById(imgId).src = imgUrl;
            });

        }
    };
    window._Me = MergePic;
})();